<template>
  <el-container class="app-layout">
    <el-header class="main-header-wrapper">
      <Header @toggle-sidebar="toggleSidebar" />
    </el-header>

    <el-container class="content-wrapper">
      <Sidebar :isCollapse="isSidebarCollapsed" />

      <el-main :class="['main-content', { 'main-content-collapsed': isSidebarCollapsed }]">
        <router-view />
      </el-main>
    </el-container>

  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import Header from '@/components/Header.vue'; // 确保路径正确
import Sidebar from '@/components/Sidebar.vue'; // 确保路径正确

const isSidebarCollapsed = ref(false); // 控制侧边栏的折叠状态

const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value;
};
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-header-wrapper {
  /* 头部高度由 Header.vue 内部或 main.css 控制，这里作为容器确保其显示 */
  height: 4.375rem; /* 70px / 16 = 4.375rem */
  padding: 0; /* 移除 Element Plus Header 默认 padding */
  z-index: 1001; /* 确保在侧边栏之上 */
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1); /* 阴影 */
  position: sticky; /* 使头部在滚动时保持在顶部 */
  top: 0;
  background-color: #fff; /* 确保背景色 */
  width: 100%;
}

.content-wrapper {
  display: flex;
  flex-grow: 1; /* 占据剩余垂直空间 */
  width: 100%; /* 确保占据全部宽度 */
  position: relative; /* 为绝对定位的 el-main 提供定位上下文 */
}

.main-content {
  /* 基础定位和尺寸，基于侧边栏的默认宽度 */
  position: absolute;
  top: 0; /* 相对于 .content-wrapper */
  left: 12.5rem; /* 200px / 16 = 12.5rem (默认侧边栏宽度) */
  right: 0;
  bottom: 0;
  padding: 1.25rem; /* 20px / 16 = 1.25rem (内容内边距) */
  background-color: #ecf0f5; /* 主内容区背景色 */
  overflow-y: auto; /* 允许内容区域滚动 */
  transition: left 0.3s ease; /* 左边距过渡动画 */
  box-sizing: border-box; /* 确保 padding 不会增加元素总尺寸 */
}

.main-content-collapsed {
  left: 4.0625rem; /* 65px / 16 = 4.0625rem (折叠侧边栏宽度) */
}

</style>